<template>
	<div class="patients-details">
	<!-- 	<right-header :header-name="headerName"></right-header>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item>添加患者</el-breadcrumb-item>
			  <el-breadcrumb-item>完善患者信息</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="top-box">	
			<div class="top-infor">
				<div class="left-infor">
					<div class="left-item">
						<h3>name</h3>
						<span>sex</span>
						<span>age</span>
					</div>
					<div class="left-item">
						<div class="item">
							<span>就诊号</span>
							<span>13678098</span>
						</div>
						<div class="item">
							<span>病例号</span>
							<span>13678098</span>
						</div>
						<div class="item">
							<span>诊断</span>
							<span>慢性肾病5期</span>
						</div>
					</div>
					<div class="left-item">
						<span>联系方式</span>
						<span>156-1567-1267</span>
					</div>
				</div>
				<div class="right-infor">
					<div class="right-item">
						<span>登记时间:</span>
						<span>2017/5/18</span>
					</div>
					<div class="right-item">
						<span>状态:</span>
						<span>待配型</span>
						<span @click="dialogFormVisible = true">修改</span>
					</div>
				</div>
			</div>
			<div class="modify">
				<el-dialog title="患者状态变更" :visible.sync="dialogFormVisible" custom-class='detail-custom'>
					<el-form :model="modify">
						<el-form-item label="患者姓名" :label-width="formLabelWidth">
							张某某
						</el-form-item>
						<el-form-item label="患者状态" :label-width="formLabelWidth">
							<el-select v-model="modify.state" placeholder="请选择">
								<el-option label="术后随访" value="术后随访"></el-option>
								<el-option label="他院移植" value="他院移植"></el-option>
								<el-option label="死亡" value="死亡"></el-option>
								<el-option label="放弃手术" value="放弃手术"></el-option>
								<el-option label="无法手术" value="无法手术"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="变更原因" :label-width="formLabelWidth">
							<el-input
							type="textarea"
							:rows="3"
							placeholder="请输入内容"
							v-model="modify.textarea">
						</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		<div class="main-box">
			<div class="main-left">
				<div class="main-item">
					<div class="title">
						基本信息
					</div>
					<div class="infor">
						<div class="item">
							<span>年龄</span>
							<span>41</span>
						</div>
						<div class="item">
							<span>血型</span>
							<span>AB</span>
						</div>
						<div class="item">
							<span>居住地址</span>
							<span>浙江 宁波 余姚</span>
						</div>
						<div class="item">
							<span>身份证</span>
							<span>310224197811082900</span>
						</div>
					</div>
				</div>
				<div class="main-item">
					<div class="tite">
						治疗信息
					</div>
					<div class="infor">
						<div class="item">
							<span>血型</span>
							<span>AB</span>
						</div>
						<div class="item">
							<span>身高/体重</span>
							<span>176cm/65kg</span>
						</div>
						<div class="item">
							<span>替代治疗方式</span>
							<span>血液透析(HD)</span>
						</div>
						<div class="item">
							<span>原发疾病</span>
							<span>AB</span>
						</div>
						<div class="item">
							<span>伴随疾病</span>
							<span>AB</span>
						</div>
						<div class="item">
							<span>既往移植次数</span>
							<span>0</span>
						</div>
					</div>
				</div>
			</div>
			<div class="main-right">
				<div class="base-infor">
					<div class="title">
						术前红色预警指标
					</div>
					<div class="main-red">
					<span class="red-title">异常指标</span>
						<div class="item">
							<span class="item-pros">双肾彩超</span>
							<div class="pro-box">
							<div class="pros">
								<span class="lable">诊断:</span>
								<span class="red-color text">急性肾炎</span>
							</div>
							</div>
						</div>
						<div class="item">
							<span class="item-pros">Rh血型鉴定</span>
							<div class="pro-box">
							<div class="pros">
								<span class="lable">Rh(D)血型:</span>
								<span class="red-color text">未查</span>
							</div>
							</div>
						</div>
						<div class="item">
							<span class="item-pros">甲乙丙丁戊前S1抗原抗体测定</span>
							<div class="pro-box">
								<div class="pros">
									<span class="lable">乙肝表面抗原:</span>
									<span class="red-color text">0.10(阳性)</span>
								</div>
								<div class="pros">
									<span class="lable">乙肝核心抗体:</span>
									<span class="red-color text">1.2(阳性)</span>
								</div>
							</div>
						</div>
						<div class="item">
							<span class="item-pros">超声心动图（彩超）</span>
							<div class="pro-box">
							<div class="pros">
								<span class="lable">左心室射血分数EF:</span>
								<span class="red-color text">30%</span>
							</div>
							</div>
						</div>
					</div>
				</div>
				<el-collapse>
				  <el-collapse-item>
				  <template slot="title">
				      无异常指标
				      <span>展开</span>
				   </template>
				    <div class="base-infor">
				    	<div class="main">
				    		<div class="main-item">
				    			<div class="item">
				    				<div class="lable">PRA(LabScreen-I-DX)</div>
				    				<div class="text">阴性</div>
				    			</div>
				    			<div class="item">
				    				<div class="lable">PRA(LabScreen-II-DX)</div>
				    				<div class="text">阴性</div>
				    			</div>
				    		</div>
				    		<div class="main-item">
				    			<div class="item">
				    				<div class="lable">BK病毒DNA</div>
				    				<div class="text">阴性</div>
				    			</div>
				    		</div>
				    	</div>
				    </div>
				  </el-collapse-item>
				  </el-collapse>
				 <div class="base-infor">
				 	<div class="title">
				 		术前黄色预警指标
				 	</div>
				 	<div class="main-ye">
				 		<span class="ye-title">
				 			异常指标
				 		</span>
				 		<div class="item">
							<span class="item-pros">血常规五分类</span>
							<div class="pro-box">
								<div class="pros">
									<span class="lable">白细胞计数:</span>
									<span class="ye-color text">18</span>
								</div>
							</div>
						</div>
						<div class="item">
							<span class="item-pros">甲功五项</span>
							<div class="pro-box">
								<div class="pros">
									<span class="lable">丙肝核心抗原:</span>
									<span class="ye-color text">阳性</span>
								</div>
							</div>
						</div>
						<div class="item">
							<span class="item-pros">甲乙丙丁戊前S1抗原抗体测定</span>
							<div class="pro-box">
								<div class="pros">
									<span class="lable">丙肝lgG:</span>
									<span class="ye-color text">阳性</span>
								</div>
							</div>
						</div>
				 	</div>
				 </div>
				 <div class="base-infor">
				 	<div class="title">
				 		术前检验检查项目
				 	</div>
				 	<div class="main">
				 		<div class="main-item">
				 			<span>HLA低分辨基因分型</span>
				 			<span>群体反应抗体检测</span>
				 		</div>
				 		<div class="main-item">
				 			<span>HLA低分辨基因分型</span>
				 			<span>群体反应抗体检测</span>
				 		</div>
				 	</div>
				 </div>
			</div>
		</div>
		<!-- <div class="base-infor four">
			<div class="title">
				基本信息
			</div>
			<div class="main">
				<div class="main-item">
					<div class="item">
						<div class="lable">血型</div>
						<div class="text">A</div>
					</div>
					<div class="item">
						<div class="lable">身高</div>
						<div class="text">171cm</div>
					</div>
					<div class="item">
						<div class="lable">体重</div>
						<div class="text">61kg</div>
					</div>
					<div class="item">
						<div class="lable">身份证</div>
						<div class="text">310224197811082900</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">原发疾病</div>
						<div class="text">尿毒症</div>
					</div>
					<div class="item">
						<div class="lable">伴随疾病</div>
						<div class="text">糖尿病</div>
					</div>
					<div class="item">
						<div class="lable">替代治疗方式</div>
						<div class="text">腹部透析</div>
					</div>
					<div class="item">
						<div class="lable">既往移植史</div>
						<div class="text">无</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">居住地址</div>
						<div class="text">浙江 宁波 余姚</div>
					</div>
				</div>
			</div>
		</div>
		<div class="base-infor two">
			<div class="title">
				*HLA配型信息
			</div>
			<div class="main">
				<div class="main-item">
					<div class="item">
						<div class="lable">HLA-A1</div>
						<div class="text">17</div>
					</div>
					<div class="item">
						<div class="lable">HLA-A2</div>
						<div class="text">17</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">HLA-B1</div>
						<div class="text">17</div>
					</div>
					<div class="item">
						<div class="lable">HLA-B2</div>
						<div class="text">17</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">HLA-DR1</div>
						<div class="text">17</div>
					</div>
					<div class="item">
						<div class="lable">HLA-DR2</div>
						<div class="text">17</div>
					</div>
				</div>
			</div>
		</div>
		<div class="base-infor two">
			<div class="title">
				*术前检查
			</div>
			<div class="main">
				<div class="main-item">
					<div class="item">
						<div class="lable">群体反应抗体检测1</div>
						<div class="text">阴性</div>
					</div>
					<div class="item">
						<div class="lable">群体反应抗体检测1</div>
						<div class="text">阴性</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">最新PRA时间</div>
						<div class="text">2017-06-18</div>
					</div>
				</div>
			</div>
		</div>
		<div class="base-infor two">
			<div class="title">
				术前红色预警指标
			</div>
			<div class="main">
				<div class="main-item">
					<div class="item">
						<div class="lable">乙肝表面抗原</div>
						<div class="text">阴性</div>
					</div>
					<div class="item">
						<div class="lable">丙型肝炎抗体</div>
						<div class="text">阴性</div>
					</div>
				</div>
				<div class="main-item">
					<div class="item">
						<div class="lable">人免疫缺陷病毒抗体</div>
						<div class="text">阴性</div>
					</div>
					<div class="item">
						<div class="lable">梅毒螺旋体抗体</div>
						<div class="text">阴性</div>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</template>
<script>
import rightHeader from '@/components/rightHeader'
	export default {
		data() {
			return {
				headerName:'等待肾源患者',
				dialogFormVisible:false,
				formLabelWidth:'120px',
				modify:{
					state:'',
					textarea:''
				},
				detailsData:{}
			}
		},
		created(){
			
		},
		computed: {
			
		},
		methods:{
			enter(){
				console.log(1);
			}
		},
		components: {
			'right-header': rightHeader
			
		}
	}
</script>
<style lang='scss' rel='stylesheet' scoped>
.patients-details{
	padding: 0 20px;
	.top-infor{
		display: flex;
		justify-content:space-between;
		padding-left: 40px;
		margin: 20px 0;
		border-bottom: 1px solid #999999;
		overflow: hidden;
		.left-infor{
			width: 70%;
			padding-bottom: 10px;
			border-right:1px solid #999999;
			.left-item{
				display: flex;
				padding-top: 15px;
				h3{
					margin-right: 30px;
				}
				span{
					margin-right: 10px;
				}
				.item{
					margin-right: 40px;
				}
			}
		}
		.right-infor{		
			flex:1;
			.right-item{
				margin-top: 20px;
				text-align: center;
			}
		}
	}
	.main-box{
		display: flex;
		.main-right{
			flex:1;
			.base-infor{
				line-height: 1;
				.item-pros{
					margin-right: 20px;
				}
				.main-red,.main-ye{
					.item{
						display: flex;
						margin-bottom: 22px;
						.pro-box{
							display: flex;
							.pros{
								margin-right: 20px;
								.red-color{
									color: red;
								}
							}
						}
					}
				}
			}
		}
	}
	.four{
		.item{
			.lable{
				width: 100px;
			}
			.text{
				width: 100px;
			}
		}
	}
	.two{
		.item{
			.lable{
				width: 150px;
			}
			.text{
				width: 200px;
			}
		}
	}
	
}
</style>